<template>
  <div>
    <Header />
    <div class="box"></div>
    <div class="box1">
      <p>境外银联网络笔笔1%消费返现</p>
      <p>故宫图书、文创品9折</p>
      <button>申请信用卡</button>
    </div>
    <div class="box3">
      <Main v-for="(v, i) in list" :key="i" :texta="v.data" :textb="v.datab" />
    </div>
    <h4>借款专区</h4>
    <div class="box4">
      <Loan
        v-for="(v, i) in listdata"
        :key="i"
        :textc="v.datac"
        :texte="v.datae"
        :textf="v.dataf"
      />
    </div>
    <img src="images/9_03.jpg" alt="" />
    <div class="box5">
      <div class="box5-a">
        <h4>卡片推荐</h4>
        <span>更多</span>
      </div>
      <Photo/>
    </div>
    <Btn/>
  </div>
</template>

<script>
import Header from "@/components/home-page/header.vue";
import Main from "@/components/home-page/main.vue";
import Loan from "@/components/card/loan.vue";
import Photo from "@/components/card/photo.vue";
import Btn from '@/components/bottomBar.vue'
export default {
  data() {
    return {
      list: [
        { data: "iconfont icon-duozhongzhifu", datab: "申请办卡" },
        { data: "iconfont icon-hebaoguanli", datab: "申请进度" },
        { data: "iconfont icon-daikuan", datab: "卡片启用" },
        { data: "iconfont icon-shenghuojiaofei", datab: "云闪付" },
        { data: "iconfont icon-e", datab: "自动还款" },
        { data: "iconfont icon-anquanzhongxin", datab: "账户安全锁" },
        { data: "iconfont icon-guijinshu", datab: "环球旅行卡" },
        { data: "iconfont icon-jiaotongchuhang_gaodedache", datab: "智行天下" },
        { data: "iconfont icon-renwuzhongxin", datab: "一键绑卡" },
        { data: "iconfont icon-zixinzhengmingzhaopian", datab: "信用报告" },
      ],
      listdata: [
        { datac: "融e借", datae: "利率优惠", dataf: "随借随还" },
        { datac: "急用钱", datae: "手机取现", dataf: "实时到账" },
        { datac: "融e借", datae: "利率优惠", dataf: "随借随还" },
        { datac: "融e借", datae: "利率优惠", dataf: "随借随还" },
        { datac: "融e借", datae: "利率优惠", dataf: "随借随还" },
      ],
    };
  },
  components: {
    Header,
    Main,
    Loan,
    Photo,
    Btn
  },
};
</script>

<style scoped>
.box {
  height: 1.83em;
  background-color: #dbb6ae;
}
.box1 {
  height: 1.27rem;
  background-color: #fbeff0;
  font-size: 0.1rem;
  text-align: center;
  padding-top: 0.4rem;
}
.box1 button {
  width: 1.3rem;
  height: 0.34rem;
  font-size: 0.16rem;
  background-color: #fc5853;
  color: white;
  border: none;
  border-radius: 0.2rem;
  margin-top: 0.22rem;
}
.box3 {
  width: 100%;
  height: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
h4 {
  font-size: 0.16rem;
  margin-left: 0.13rem;
}
.box4 {
  display: flex;
  width: 2.9rem;
  height: 1.11rem;
  margin: auto;
  overflow-x: auto;
}
img {
  width: 2.84rem;
  height: 0.63rem;
  display: block;
  margin: 0.22rem auto;
}
.box5{
  width: 2.84rem;
  margin: auto;
}
.box5-a{
   display: flex;
  justify-content: space-between;
  align-items: center;
}
.box5-a span{
  font-size: 0.12rem;
}
</style>